<template>
  <el-dialog
    custom-class="eliminateAlarm"
    title="消除报警"
    append-to-body
    width="40%"
    top="11%"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    class="user-view"
    @close="onClose"
  >
    <span slot="title" class="dialog-title">
      <span>消除报警</span>
    </span>
    <el-form
      ref="eliminateAlarmForm"
      :model="form"
      style="padding-right: 40px; padding-top: 40px"
      label-width="140px"
      :rules="rules"
    >
      <el-form-item label="消警原因" prop="misReport">
        <el-select
          v-model="form.misReport"
          placeholder="请选择消警原因"
          filterable
          style="width: 100%"
        >
          <el-option
            v-for="item in alarmReasonData"
            :key="item.dictValue"
            :label="item.dictText"
            :value="item.dictValue"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="消警备注" prop="eliminateReason">
        <el-input
          v-model="form.eliminateReason"
          type="textarea"
          placeholder="请输入消警备注"
          :rows="3"
        ></el-input>
      </el-form-item>
      <el-form-item label="操作人员" prop="eliminateUser">
        <!-- <el-input v-model="form.eliminateUser" placeholder="请输入操作人员"></el-input> -->
        <el-select
          v-model="form.eliminateUser"
          filterable
          clearable
          placeholder="请选择操作人员"
          style="width: 100%"
        >
          <el-option
            v-for="item in userList"
            :key="item.userId"
            :label="item.username"
            :value="item.username"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="warning" plain :loading="loading" @click="onClose">{{
        $t('common.cancel')
      }}</el-button>
      <el-button
        type="primary"
        plain
        :loading="loading"
        @click="handleSubmit"
        >{{ $t('common.confirm') }}</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
import systemManageApi from '@/api/system-manage'
import warningManageApi from '@/api/warning-manage'
export default {
  props: {
    systemMsg: {
      type: Object,
      default: null,
    },
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    alarmReasonData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      // visible: false,
      viewInfoList: {},
      form: {
        misReport: '', // 消警原因
        eliminateReason: '', // 消警备注
        eliminateType: 1,
        eliminateUser: '', // 操作人员
      }, // eliminateType 是否消警，只有1
      loading: false,
      deleteId: '',
      userList: [],
    }
  },
  computed: {
    rules() {
      return {
        misReport: [
          { required: true, message: '请选择消警原因', trigger: 'change' },
        ],
        eliminateUser: [
          { required: true, message: '请选择操作人员', trigger: 'change' },
        ],
      }
    },
  },
  watch: {},
  mounted() {
    this.getUser()
  },
  methods: {
    getUser() {
      systemManageApi
        .getUserNormal({})
        .then((data) => {
          this.userList = data.data.data.rows
        })
        .catch((e) => {
          this.$message.error('获取数据失败，请联系管理员')
        })
    },
    init(row) {
      this.viewInfoList = row
    },
    // reset() {
    //   this.loading = false
    //   this.$refs['eliminateAlarmForm'].resetFields()
    // },
    onClose() {
      // this.reset()
      // this.visible = false
      this.loading = false
      this.$emit('close')
    },
    onSuccess() {
      this.loading = false
      console.log('onSuccess')
      this.$emit('success')
    },
    handleSubmit() {
      this.$refs['eliminateAlarmForm'].validate((err, values) => {
        if (err) {
          this.loading = true
          // const params = this.$util.deepClone(this.form)
          try {
            if (this.systemMsg.alarmName === '巡检隔离报警') {
              warningManageApi
                .deleteWarnIsolation(this.systemMsg.id, {
                  ...this.form,
                  ids: this.systemMsg.id,
                })
                .then(() => {
                  this.$message.success('消除报警成功')
                  this.onSuccess()
                })
                .catch(() => {
                  this.loading = false
                })
            } else {
              warningManageApi
                .batchEliminateByIds({
                  ...this.form,
                  ids: this.systemMsg.id,
                })
                .then(() => {
                  this.$message.success('消除报警成功')
                  this.onSuccess()
                })
                .catch(() => {
                  this.loading = false
                })
            }
          } catch (e) {
            this.loading = false
          }
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
// /deep/.eliminateAlarm {
//   background-image: url("~@/assets/popup-bg.png");
//   background-size: 100% 100%;
//   background-color: transparent;
//   .el-dialog__header {
//     border-bottom: none;
//     .dialog-title {
//       color: #81e8fe;
//       position: absolute;
//       left: 30px;
//       top: 30px;
//     }
//     .el-dialog__headerbtn {
//       background: none;
//       background-image: url("~@/assets/exit.png");
//       background-size: 100% 100%;
//       width: 46px;
//       height: 46px;
//       top: 22px;
//       right: 32px;
//     }
//     // .el-icon-close {
//     //   font-size: 20px;
//     //   color: #81e8fe;
//     // }
//   }
//   .el-dialog__body {
//     .el-form-item__label {
//       color: #fff;
//     }
//     .el-switch__label {
//       color: #ccc;
//     }
//     .el-switch__label.is-active {
//       color: #1890ff;
//     }
//     .el-radio__input.is-checked .el-radio__inner {
//       border-color: #80e8e6;
//       background: #80e8e6;
//     }
//     .el-radio__input.is-checked + .el-radio__label {
//       color: #80e8e6;
//     }
//   }
//   .dialog-footer {
//     height: 60px;
//     .buttonBox {
//       margin-right: 30px;
//     }
//     .el-button {
//       text-align: center;
//       background: rgba(0, 185, 255, 0.3);
//       border: 1px solid #11b3ff;
//       border-radius: 2px;
//       color: #ffffff;
//       cursor: pointer;
//     }
//     .el-button:hover {
//       background: #11b3ff;
//     }
//   }
// }
// /deep/.el-dialog__footer {
//   padding-top: 0;
//   padding-bottom: 50px;
//   /deep/.dialog-footer {
//     .buttonBox {
//       margin-right: 30px;
//     }
//     .el-button {
//       text-align: center;
//       background: rgba(0, 185, 255, 0.3);
//       border: 1px solid #11b3ff;
//       border-radius: 2px;
//       color: #ffffff;
//       cursor: pointer;
//     }
//     .el-button:hover {
//       background: #11b3ff;
//     }
//   }
// }
// /deep/.el-dialog__header {
//   .el-dialog__title {
//     color: #ffffff;
//   }
// }

// /deep/.el-input-group__append,
// /deep/.el-input-group__prepend {
//   color: #00b1d6;
//   background: rgba(0, 177, 214, 0.18);
//   border: 1px solid rgba(0, 177, 214, 1);
// }

// /deep/.el-input__inner,
// /deep/.el-textarea__inner {
//   border: 1px solid rgba(0, 177, 214, 1);
//   background: rgba(0, 177, 214, 0.18);
//   color: #fff;
// }

// /deep/.el-form-item__label {
//   color: #fff;
// }
// /deep/.el-radio__label {
//   color: #fff;
// }
// .labelValue {
//   color: #fff;
// }
</style>
